<template>
    <div class="apprContainer" @click="goToDetail">
        <div class="startItem">
            <div class="leftCon">
                <div class="nameIcon" :class="setColor(item.executeType)">
                    {{item.executeType == 1 ? '请' : (item.executeType == 3 ? '销' : '代')}}
                </div>
            </div>
            <div class="fluid">
                <p class="titleAppr">
                    <!-- <span v-if="item.busi_id.indexOf('QJ') > -1" class="title">我的请假申请</span>
                    <span v-else class="title">我的销假申请</span> -->
                    <span class="title" v-if='item.executeType=="2" || item.executeType=="4"'>{{item.oldSourceName}}的{{ item.executeType == 2 ? '请假' : '销假' }}申请</span>
                    <span class="title" v-else>我的{{item.executeType == 1  ? '请假' : '销假' }}申请</span>
                    <!-- <span class="time">{{item.start_time.replace(/\-/g,".")}}</span> -->
                </p>
                <ul>
                    <li><span class="">请假类型</span> : <span>{{item.wfBusinessProcessData.processTypeName}}</span></li>
                    <li><span class="">开始时间</span> : <span>{{(item.executeType=="3" || item.executeType=="4" ? item.wfBusinessProcessData.effeStartTime : item.wfBusinessProcessData.startTime) | handleDisplayDate}}&nbsp;{{(item.executeType=="3" || item.executeType=="4" ? item.wfBusinessProcessData.effeStartTimeHalfDaySign : item.wfBusinessProcessData.startTimeHalfDaySign) | ampm}}</span> </li>
                    
                    <li><span class="">结束时间</span> : <span>{{(item.executeType=="3" || item.executeType=="4" ? item.wfBusinessProcessData.effeEndTime : item.wfBusinessProcessData.endTime) | handleDisplayDate}}&nbsp;{{(item.executeType=="3" || item.executeType=="4" ? item.wfBusinessProcessData.effeEndTimeHalfDaySign : item.wfBusinessProcessData.endTimeHalfDaySign) | ampm}}</span></li>
                </ul>
                <p :class="classObject">{{item.status | handleStatus}}</p> 
            </div>
        </div>
        <div class="bgColor"></div>
    </div>
</template>

<script>


export default {
  name: 'app',
  data() {
    return {
        appro:false,
        reject:false,
    };
  },
  props:['item'],
  methods: {
      goToDetail:function(){
          //  let params = {
          //     applyId:obj.applyId ,
          //     exectionId: obj.exectionId
          //  }

        localStorage.setItem('St_BsId',this.item.id)
        location.href = '/module/myStart.html';
            
      },
      setColor:function(k){
           if (k == 1) {
                return '';
           } else if (k == 3) {
                return 'xiaojia'
           } else {
                return 'daiqing'
           }   
      },
  },
  computed:{
        classObject: function () {

            if (this.item.status == 2) {
                return {'waitAppro':true};
            } else if (this.item.status == 1) {
                return {'Appro':true};
            } else {
                return {'reject':true};
            }

        }
  },
  filters:{
     filterName:function(val){
        return val.substr(-2);
     },
     ampm: function(value) {
          if (value == '1') {
              return '上午';
          } else if (value == '2') {
              return '下午';
          }
      },
      handleDisplayDate: function(val){
          if (val) {
            if (typeof val === 'string' && val.split(' ').length>1) {
                return val.split(' ')[0].replace(/\-/g, '.');
            }
              var dataObj = new Date(val)
              var year = dataObj.getFullYear();
              var month = dataObj.getMonth() + 1;
              month = month > 9 ? month : '0' + month;
              var day = dataObj.getDate();
              day = day > 9 ? day : '0' + day;
              return year + "." + month + "." + day 
          } else {
              return ''
          }
      },
      handleStatus: function(status){
          return status == 1 ? '已备案' : (status == 2 ? '审批中' : (status == 3 ? '已撤销' : '已拒绝'));
      }
  },
  components: {


  },
  watch: {

  },
  mounted: function() {

  }
};
</script>

<style lang="less" scope="scope">

    .apprContainer{
        .startItem {
            display: flex;
            margin-top:0.3rem;
            .nameIcon{
                width: 0.48rem;
                height: 0.48rem;
                line-height:0.48rem;
                text-align:center;
                background-color:#007DE4;
                border-radius:50%;
                color:#eee;
                margin:auto;
            }
            div.xiaojia{
                background-color: #1cbe29;
            }
            div.daiqing{
                background-color: #f7ba2a;
            }
            .title{
            font-size:0.4rem;
            color:#000;
            font-weight:bold;
            }
            .fluid{
                flex: 1;
                padding-right:0.3rem;
                .titleAppr{
                    margin-bottom:0.06rem;
                }
                li{
                    font-size:0.32rem;
                }
                .reject{
                    color:#E24040;
                    margin-top:0.1rem;
                    margin-bottom:0.1rem;
                }
                .waitAppro{
                    color:#D8D41D;
                    margin-top:0.1rem;
                    margin-bottom:0.1rem;
                }
                .Appro{
                    color:green;
                    margin-top:0.1rem;
                    margin-bottom:0.1rem;                   
                }
                >p:not(.titleAppr){
                    font-size:0.32rem;
                }
            }
            .leftCon{
            padding-top:0.06rem;
            width:1rem;
            }
            .time{
            float:right;
            
            }
        }
        .bgColor{
        background-color:#F3F3F3;
        height:0.02rem;
        }
    }

</style>

